<template>
	<u-popup
		class="popupstyle"
		v-model="moreshow"
		:mask-close-able="false"
		mode="bottom"
		@close="close"
	>
		<view class="popuphead">{{ $t('locales.goodsInfo') }}</view>
		<scroll-view v-if="(deliverdata.length > 0) || data.goodsBasePriceD" class="morecontent" :scroll-y="true">
			<u-cell-group>
				<view v-for="item in otherList" :key="item.attributeName">
					<u-cell-item
						class="cell-item"
						:title="item.attributeName"
						:value="item.attributeValue"
						title-width="200"
						:title-style="{ color: '#888', width: '200rpx' }"
						:value-style="{ color: '#222', textAlign: 'left' }"
						v-if="item.attributeValue"
						:arrow="false"
					></u-cell-item>
				</view>
				<u-cell-item
					v-if="skuList.length < 2"
					class="cell-item"
					:title="$t('locales.recommendPrice')"
					:arrow="false"
					title-width="200"
					:value="data.currencySymbol + (skuList[0] || {}).attributeValue"
					:title-style="{color: '#FD6712', width: '200rpx'}"
					:value-style="{color: '#FD6712', textAlign: 'left'}"
				/>

				<view v-if="skuList.length > 1" class="cell-like">
					<view class="cell-like__title">{{ $t('locales.recommendPrice') }}</view>

					<view class="cell-like__list">
						<view
							v-for="item in skuList"
							:key="item.id"
							class="cell-like__item"
						>
							<text class="title">{{ item.attributeName }}</text>
							<text class="color">{{ data.currencySymbol }} {{ item.attributeValue }}</text>
						</view>
					</view>
				</view>
			</u-cell-group>
			<view style="line-height:40px;padding:0 125px;color:#02A7F0" v-if="data.industryTypeCode === 'vic'" @click="getapplicableModels">
				查看适用车型
				<u-icon name="arrow-up" v-if="show"></u-icon>
				<u-icon name="arrow-down" v-if="!show"></u-icon>
			</view>
			<view v-if="ModelsList.length > 0 && show && data.industryTypeCode === 'vic'">
					<u-cell-group>
						<view v-for="item in ModelsList" :key="item.attributeName">
							<u-cell-item
							:title="item.attributeName"
							:value="item.attributeValue"
							:arrow="false"
							></u-cell-item>
						</view>
					</u-cell-group>
			</view>
			<!-- </scroll-view> -->
		</scroll-view>
		
		<view v-if="deliverdata.length === 0 && (!data.goodsBasePriceD)">
			<u-cell-item :title="$t('locales.noneGoodsInfo')" :arrow="false"></u-cell-item>
		</view>
		<view class="confrim-btn">
			<view class="btn u-line-1" @click="moreshow = false"> {{ $t('locales.close') }} </view>
		</view>
	</u-popup>
</template>

<script>
import {
  sendvinLibraryApplicableModels
} from '@/api/http/order'
export default {
	props: {
		value: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: () => {}
		},
		deliverdata: {
			type: Array,
			default: () => []
		}
	},

	computed: {
		skuList() {
			return this.deliverdata.filter(current => current.sort === 3)
		},

		otherList() {
			return this.deliverdata.filter(current => current.sort !== 3)
		}
	},

	watch: {
		value(val) {
			this.moreshow = val
		},
		deliverdata(val) {
			val.forEach(res => {
				if(res.attributeName === '重量') {
					res.attributeValue = res.attributeValue + 'KG'
				}
			});
		},
		data(val) {
			console.log(val)
		},

		
	},
	data() {
		return {
			moreshow: false,
			show:false,
			ModelsList: []
		}
	},
	methods: {
		// 获取行业车品牌试用车型
		getapplicableModels() {
			if(this.show) {
				this.show = false
			} else {
				this.show = true
				sendvinLibraryApplicableModels({goodsId: this.data.id}).then(res => {
				this.ModelsList = res.data
			})
			}
		},
		close() {
			this.show = false
		}
	}
}
</script>

<style lang="scss" scoped>
.popupstyle {

	.uni-scroll-view,
	.uni-scroll-view-content {
		
		background: #ffffff;
	}
	.morecontent {
		height: 800rpx;
		// height: auto;
		// max-height: 500rpx;
		overflow:auto;
		padding: 0 28rpx 0 33rpx;
		box-sizing: border-box;
		// border-bottom: 1rpx solid #eee;
	}
}
// /deep/ .uni-scroll-view,
// 	.uni-scroll-view-content {
// 		max-height: 100vh;
// 	}
.popuphead {
	height: 86rpx;
	font-size: 36rpx;
	line-height: 86rpx;
	text-align: center;
	font-weight: 500;
	border-bottom: 1rpx solid #eee;
}

.confrim-btn {
	padding: 36rpx 34rpx;
}

.btn {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #fff;
  background: #0049ac;
  padding: 0 15rpx;
	border-radius: 42rpx;
  box-sizing: border-box;
}

.cell-item {
	padding-left: 0;
	padding-right: 0;
}

.cell-like {
	border-bottom: 1rpx solid #eee;

	.cell-like__title {
		padding: 30rpx 0 33rpx;
		// margin-bottom: 29rpx;
		font-size: 26rpx;
		line-height: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #0049AC;
	}

	.cell-like__list {
		font-size: 26rpx;

		.cell-like__item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 35rpx;
			font-weight: 500;

			.title {
				color: #666;
			}

			.color {
				color: #FD6712;
			}
		}
	}
}
</style>
